<template>
  <div>
    <!-- 页面标题 -->
    <h2 class="page-title">家谱管理系统功能展示</h2>
    <!-- 树形结构容器 -->
    <div class="tree-container">
      <!-- 树形结构组件 -->
      <el-tree
          :data="data"
          :props="defaultProps"
          @node-click="handleNodeClick"
      >
      </el-tree>
    </div>
  </div>
</template>

<script>
export default {
  name: "tree_home",
  data() {
    return {
      // 树形结构数据
      data: [
        {
          label: "家谱管理系统",
          children: [
            {
              label: "家谱成员管理功能",
              children: [
                {
                  label: "成员展示",
                },
                {
                  label: "成员新增",
                },
                {
                  label: "成员删除",
                },
                {
                  label: "成员修改",
                },
                {
                  label: "成员模糊查询",
                },
              ],
            },
            {
              label: "家谱成员履历管理功能",
              children: [
                {
                  label: "成员履历展示",
                },
                {
                  label: "成员履历新增",
                },
                {
                  label: "成员履历删除",
                },
                {
                  label: "成员履历修改",
                },
                {
                  label: "成员履历查询",
                },
              ],
            },
            {
              label: "家谱图",
              children: [
                {
                  label: "家族成员展示",
                },
                {
                  label: "家族成员履历查看",
                },
              ],
            },
          ],
        },
      ],
      // 树形结构组件的属性配置
      defaultProps: {
        children: "children",
        label: "label",
      },
      currentImageSrc: "",
      showImage: false,
    };
  },
  methods: {
    // 处理节点点击事件
    handleNodeClick(data) {
      if (data.imgSrc) {
        this.currentImageSrc = data.imgSrc;
        this.showImage = true;
      } else {
        this.showImage = false;
      }
    },
  },
};
</script>

<style scoped>
.tree-container {
  display: flex;
  margin-top: 50px;
  margin-left: 80px;
  height: 100%;
  background-color: #ffffff;
  padding: 20px;
  box-sizing: border-box;
}
</style>